<template>
  <div class="pages" style=" display: flex;">
    <div
      style="width: 400px;height: 600px;  display: flex; justify-content: center;align-items: center;flex-direction: column; border: 1px solid #00000080;">
      <div style="margin-bottom: 10px;"> 能管总览</div>
      <div style="display: flex;">
        <div class="Bigbox">
          <div ref="info" class="box2"></div>
        </div>

        <!-- 饼图 -->


        <div ref="nengyuan" style="width: 200px;height: 200px;border: 1px solid #00000080;margin-right: 20px;">

        </div>


      </div>
      <div
        style="width: 350px;height: 350px;border: #00000080 solid 1px; display: flex;flex-direction: row; flex-wrap: wrap;justify-content: center; align-items: center;">
        <div>能源趋势簇状图</div>
        <div style="display: flex;">
          <div ref="zhican"
            style="width: 100px;height: 150px;  margin-top: 10px; border-radius: 5px;margin-right: 10px;"></div>
          <!-- echarts -->
          <div ref="zhican2"
            style="width: 100px;height: 150px;  margin-top: 10px; border-radius: 5px;margin-left: 80px;"></div>
          <!-- echarts -->

        </div>
        <div style="display: flex;margin-top: 0px;">
          <div ref="zhican3" style="width: 100px;height: 150px;  margin-top: 10px; border-radius: 5px;"></div>
          <!-- echarts -->
          <div ref="zhican4" style="width: 100px;height: 150px;  margin-top: 10px; border-radius: 5px;"></div>
          <!-- echarts -->
          <div ref="zhican5" style="width: 100px;height: 150px;  margin-top: 10px; border-radius: 5px;"></div>
          <!-- echarts -->
        </div>
      </div>

    </div>
    <div style="display: flex;flex-direction: column;">
      <div style="display: flex;">
        <div style="border: 1px solid #00000080;height: 400px;margin-top: 0px;margin-left: 20px;">

          <img style="width: 400px;height: 400px;" src="../../assets/QQ图片20240515113331.png" alt="">
        </div>

        <div
          style="display: flex; flex-direction: row; padding-left: 0px; flex-wrap: wrap; border: 1px solid #00000080; width: 400px;height:400px;margin-left: 30px;">
          <div style="margin-left: 100px;"> 能耗设备控制</div>
          <el-scrollbar always="true" style="display: flex; flex-direction: column;" >
            <div style="display: flex;">
            <div style="display: flex; flex-direction: column;">

<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 20px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">监控设备</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/QQ截图20240516100025.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 100px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">运输工具</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片1.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
</div>

<div style="display: flex; flex-direction: column;">
<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 20px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">仓储设备</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片2.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 100px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">包装设备</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片3.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
</div>
<div style="display: flex; flex-direction: column;">

<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 20px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">输送带</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片8.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 100px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">分拣机</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片7.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
</div>

<div style="display: flex; flex-direction: column;">
<div style="margin-left: 50px; height: 100px;width: 50px;margin-top: 20px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">数据中心</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片5.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
<div style="margin-left: 50px; height: 100px;width: 50px; margin-top: 100px;">
  <table style="border: 1px solid #000;">
    <tr>
      <th colspan="3" style="border: 1px solid #000;">保鲜设备</th>
    </tr>
    <tr>
      <td colspan="3" style="border: 1px solid #000;"><img src="../../assets/图片6.png" alt=""
          style="width: 80px;height: 100px;" </td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;">数量</td>
      <td style="border: 1px solid #000;">运行率</td>
      <td style="border: 1px solid #000;">碳排放</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000;font-size: 12px;">50</td>
      <td style="border: 1px solid #000;font-size: 12px;">90%</td>
      <td style="border: 1px solid #000;font-size: 12px;">270</td>
    </tr>

  </table>


</div>
</div>
</div>
  </el-scrollbar>
        
        </div>
      </div>


      <div style="display: flex;">
        <div style="width: 100%;height: 200px; border: 1px solid #00000080;">
          <div ref="zhexian" style="width: 95%; height: 250px;">

          </div>


        </div>
        <div style="width: 100%;height: 200px; border: 1px solid #00000080;">
          <div ref="zhexian2" style="width: 95%; height: 250px;">

          </div>


        </div>
      </div>

    </div>
  </div>


</template>

<script setup>
import { onMounted, ref, inject } from "vue";

//通过inject使用echarts
const echarts = inject("echarts");
const info = ref();

const zhican = ref();
const zhican2 = ref();
const zhican3 = ref();
const zhican4 = ref();
const zhican5 = ref();
const nengyuan = ref();
const zhexian = ref();
const zhexian2 = ref();

onMounted(() => {
  // 渲染echarts的父元素
  var infoEl = info.value;
  var zhexians = zhexian.value;
  var zhican1s = zhican.value;
  var zhican2s = zhican2.value;
  var zhican3s = zhican3.value;
  var zhican4s = zhican4.value;
  var zhican5s = zhican5.value;
  var nengyuans = nengyuan.value;
  var zhexian2s = zhexian2.value;

  var userzc6 = echarts.init(nengyuans, 'light')
  //  light dark
  var userEc = echarts.init(infoEl, "light");
  console.log(infoEl)
  var userzc8 = echarts.init(zhexian2s, 'light')
  var userzc7 = echarts.init(zhexians, "light")
  var userzc = echarts.init(zhican1s, 'light')
  var userzc2 = echarts.init(zhican2s, 'light')
  var userzc3 = echarts.init(zhican3s, 'light')
  var userzc4 = echarts.init(zhican4s, 'light')
  var userzc5 = echarts.init(zhican5s, 'light')

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '碳排放占比',
      left: 'center',
      top: 20
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      show: false
    },
    series: [
      {
        name: '碳排',
        type: 'pie',
        radius: '50%',
        label: {
          show: true,
          position: 'inside',
          textStyle: {
            fontSize: 5
          }

        },

        data: [
          { value: 11, name: '信息设备' },
          { value: 43, name: '运输工具' },
          { value: 17, name: '仓储设备' },
          { value: 10, name: '包装设备' },
          { value: 19, name: '货物处理' }
        ],
        emphasis: {

          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  var option3 = {
    title: {
      text: '货运运输工具',
      top: 125,
      left: 20,
      textStyle: {

        fontStyle: 'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ,字体风格
        fontWeight: 'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ,字体粗细
        fontFamily: 'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
        // 'Microsoft YaHei'(微软雅黑) ,文字字体
        fontSize: 12,//字体大小
        lineHeight: 18,//字体行高
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',

        show: false,
        data: ['路灯', '监控', 'wifi', '绿化', '垃圾', '停车'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [

      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '100%',
        data: [100, 160, 170, 130, 150, 100]
      }
    ]
  };
  var option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        show: false,
        type: 'category',
        data: ['燃料成本', '电力成本', '包装材料成本', '人力成本', '维护成本',],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        label: {
          show: true,
          position: 'top'
        },
        name: '成本',
        type: 'bar',
        barWidth: '60%',
        data: [15, 1.56, 9, 11, 10,],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgb(243,224,140,0.5)' },
            { offset: 0.5, color: 'rgb(243,224,140)' },
            { offset: 0, color: 'rgb(250,208,43)' }])
        }
      }
    ]
  };
  var option5 = {

    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,


      show: true
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '货运运输工具',
        type: 'line',
        data: [23.27, 24.08, 20.73, 21.50, 19.84, 17.11, 17.28, 24.17, 18.80, 20.81, 22.92, 17.74],

      },
      {
        name: '信息技术设备',
        type: 'line',
        data: [5.95, 6.16, 5.30, 5.50, 7.04, 4.38, 4.42, 6.18, 7.51, 5.32, 7.86, 3.54],

      },
      {
        name: '货物处理设备',
        type: 'line',
        data: [10.28, 8.64, 11.25, 9.50, 8.77, 7.56, 7.63, 10.68, 8.31, 9.19, 10.13, 7.84],

      },
      {
        name: ' 包装设备',
        type: 'line',
        data: [5.41, 5.60, 7.00, 5.00, 4.62, 3.98, 4.02, 2.22, 4.37, 4.84, 6.08, 4.13],

      },
      {
        name: '仓储设备',
        type: 'line',
        data: [9.20, 9.77, 8.20, 8.50, 11.64, 6.76, 6.83, 9.56, 7.43, 8.23, 9.06, 9.01],

      }
    ]
  };
  var option6 = {
    title: {
      text: '能耗'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,


      show: true
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '公司',
        type: 'line',
        data: [54.11, 56.00, 48.21, 50.00, 46.15, 39.78, 40.18, 56.21, 43.72, 48.39, 53.30, 41.26],

      },
      {
        name: '行业',
        type: 'line',
        data: [56.26, 54.61, 52.71, 48.92, 44.32, 41.36, 37.42, 40.79, 45.09, 50.39, 60.88, 40.01],

      },
      {
        name: '标杆',
        type: 'line',
        data: [41.62, 53.71, 43.26, 51.83, 48.37, 45.51, 41.68, 50.88, 40.70, 49.16, 35.39, 50.84],

      }
    ]
  };
  userEc.setOption(option);

  console.log(option)
  option3.xAxis = [
    {
      type: 'category',

      show: false,
      data: ['货车', '船舶', '飞机'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
    option3.series = [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '100%',
        data: [6379, 306, 2391],
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgb(84,149,35)' },
            { offset: 0.5, color: 'rgb(124,174,87)' },
            { offset: 0, color: 'rgb(166,200,141)' }])
        }
      }
    ]
  userzc.setOption(option3)
  option3.title.text = "仓储设备"
  option3.xAxis = [
    {
      type: 'category',

      show: false,
      data: ['照明设备', '保险设备', '自动化仓储设备', '办公设备'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
    option3.series = [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '90%',
        data: [6733, 3467, 4102, 967],
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgb(243,224,140,0.5)' },
            { offset: 0.5, color: 'rgb(243,224,140)' },
            { offset: 0, color: 'rgb(250,208,43)' }])
        }
      }
    ]
  console.log(option3)
  userzc2.setOption(option3)
  option3.title.text = "包装设备"
  option3.xAxis = [
    {
      type: 'category',

      show: false,
      data: ['封箱机', '缠绕机', '包装填充设备'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
    option3.series = [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '100%',
        data: [2417, 1497, 1723],
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgb(46,165,156)' },
            { offset: 0.5, color: 'rgb(178,223,220)' },
            { offset: 0, color: 'rgb(178,223,220)' }])
        }
      }
    ]
  userzc3.setOption(option3)
  option3.title.text = "货物处理设备"
  option3.xAxis = [
    {
      type: 'category',

      show: false,
      data: ['起重机', '输送带', '分拣机'],
      axisTick: {
        alignWithLabel: true
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 1, color: 'rgb(254,145,140)' },
          { offset: 0.5, color: 'rgb(254,211,150)' },
          { offset: 0, color: 'rgb(254,224,152)' }])
      }
    }
  ],
    option3.series = [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '100%',
        data: [1429, 1192, 2689],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  userzc4.setOption(option3)
  option3.title.text = "信息技术设备"
  option3.xAxis = [
    {
      type: 'category',

      show: false,
      data: ['物流管理系统', 'GPS跟踪系统', '数据中心设备'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
    option3.series = [
      {
        name: '能源趋势',
        type: 'bar',
        barWidth: '100%',
        data: [1459, 581, 2783],
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgb(208,161,242)' },
            { offset: 0.5, color: 'rgb(220,187,246)' },
            { offset: 0, color: 'rgb(236,220,251)' }])
        }
      }
    ]
  userzc5.setOption(option3)
  userzc6.setOption(option4)
  userzc7.setOption(option5)
  userzc8.setOption(option6)
})


// 使用刚指定的配置项和数据显示图表。


</script>

<style lang="scss" scoped>
.box1 {

  width: 200px;
  height: 100px;


}

.box2 {

  width: 200px;
  height: 200px;



}

.pages {
  width: 100%;
  height: 100%;
}

.Bigbox {
  display: flex;
  border-radius: 5px;


  border: 1px solid #00000080;
  width: 150px;
  height: 150px;

}

td {
  font-size: 8px;
}
</style>